<template>
  <div class="box1">
    <h1>登陆界面</h1>
    <el-form
      :model="user"
      status-icon

      label-width="100px"
      class="demo-ruleForm"
      label-position="left"
      style="margin-top: 40px"

    >
      <el-form-item label="账号" prop="pass">
        <el-input
          type="text"
          v-model="user.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="checkPass">
        <el-input
          type="password"
          v-model="user.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <div style="display: flex;">
            <el-input
              autocomplete="off"
              style="width: 100px;"
              v-model = "user.code"
            ></el-input>
            <div id="code" @click="getSvg()" style="width: 150px; height: 40px;"></div>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="login"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
    data(){
        return {
            user:{
                username:'',
                password:'',
                code:''
            },
            text:'',
            data:''
        }
    },
    methods:{
        async getSvg(){
            let{data:{text,data}} = await this.axios.get("/getSvg")
            this.text = text
            this.data = data
            this.data = `<div>${ this.data }</div>`
            code.innerHTML = this.data
        }
        ,
        async login(){
            if(this.text==this.user.code){

                let {data:{code,msg,token}} = await this.axios.get("/login",{params:this.user})
                if(code==200){
                    localStorage.setItem("token",token)
                    this.$message.success(msg)
                    this.$router.push("/index")
                }else{
                    this.$message.error(msg)
                }
            }else{
                this.$message.error("验证码错误")
            }
        }
    },
    created(){
        this.getSvg()
    }

};
</script>

<style>
.box1 {
    width: 500px;
    height: 300px;
    /* position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; */
    margin: auto;
    margin-top: 150px;
    text-align: center;
}
</style>
